<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <body>
    <div id="root"></div>
    <script type="text/babel">
      // 受限组件，其实就是表单组件给到了一个值，在界面就无法被直接修改（一般就是可以和用户交互的哪些控件比如输入框、单选框、多选框、文本域）
      // 表单组件的值只能通过setState来修改
      class Hello extends React.Component {
        state={
          value:'Hello'
        }
        chenge=(e)=>{
          console.log(e.target.value,'e')
          this.setState({value:e.target.value})
        }
        render(){
          return <div>
            <input type="text"/>
            <input type="text" defaultValue={this.state.value}  onChange={this.chenge}/>
            </div>
        }
      }
      ReactDOM.render(<Hello />, document.getElementById("root"))
    </script>
    <hr/>
      <div id="root1"></div>
      <script type="text/babel">
        // 受限组件，其实就是表单组件给到了一个值，在界面就无法被直接修改（一般就是可以和用户交互的哪些控件比如输入框、单选框、多选框、文本域）
        // 表单组件的值只能通过setState来修改
        class Hello extends React.Component {
          state={
            value:'Hello'
          }
          
          render(){
            return <div> 
              <h1>单选</h1>
              空值：
              <label><input type="radio" name='eat'/>吃饭</label>
              <label><input type="radio" name='eat'/>睡觉</label>
                <br/>
              默认值：
              <label><input type="radio" name='sex' defaultChecked/>男</label>
              <label><input type="radio" name='sex'/>女</label>
              </div>
          }
        }
        ReactDOM.render(<Hello />, document.getElementById("root1"))
      </script>
       <hr/>
       <div id="root2"></div>
       <script type="text/babel">
         // 受限组件，其实就是表单组件给到了一个值，在界面就无法被直接修改（一般就是可以和用户交互的哪些控件比如输入框、单选框、多选框、文本域）
         // 表单组件的值只能通过setState来修改
         class Hello extends React.Component {
           state={
             value:'Hello'
           }
           
           render(){
             return <div> 
               <h1>多选</h1>
               空值：
               <label><input type="checkbox" name='eat'/>吃饭</label>
               <label><input type="checkbox" name='eat'/>睡觉</label>
               <label><input type="checkbox" name='eat'/>睡觉</label>
               <label><input type="checkbox" name='eat'/>睡觉</label>
               <label><input type="checkbox" name='eat'/>睡觉</label>
                 <br/>
               默认值：
               <label><input type="checkbox" name='sex' defaultChecked/>男</label>
               <label><input type="checkbox" name='sex'/>女</label>
               <label><input type="checkbox" name='sex'/>女</label>
               <label><input type="checkbox" name='sex'/>女</label>
               <label><input type="checkbox" name='sex'/>女</label>
               </div>
           }
         }
         ReactDOM.render(<Hello />, document.getElementById("root2"))
       </script>
        <hr/>
        <div id="root3"></div>
        <script type="text/babel">
          // 受限组件，其实就是表单组件给到了一个值，在界面就无法被直接修改（一般就是可以和用户交互的哪些控件比如输入框、单选框、多选框、文本域）
          // 表单组件的值只能通过setState来修改
          class Hello extends React.Component {
            chenge=(e)=>{
              console.log(e.target.value)
            }
            render(){
              return <div> 
                <h1>下拉框</h1>
                空值：
                <select>
                  <option value="北京">北京</option>
                  <option value="上海">上海</option>
                  <option value="武汉">武汉</option>
                  <option value="深圳">深圳</option>
                  <option value="广州">广州</option>
                  <option value="长沙">长沙</option>
                  </select>
                  <br/>
                默认值：
                <select defaultValue='长沙'>
                  <option value="北京" >北京</option>
                  <option value="上海">上海</option>
                  <option value="武汉">武汉</option>
                  <option value="深圳">深圳</option>
                  <option value="广州">广州</option>
                  <option value="长沙">长沙</option>
                  </select>
                  <br/>
                多个默认值：
                <select multiple={true} defaultValue={['上海','武汉']} onChange={this.chenge}>
                  <option value="北京" >北京</option>
                  <option value="上海">上海</option>
                  <option value="武汉">武汉</option>
                  <option value="深圳">深圳</option>
                  <option value="广州">广州</option>
                  <option value="长沙">长沙</option>
                  </select>
                </div>
            }
          }
          ReactDOM.render(<Hello />, document.getElementById("root3"))
        </script>
  </body>
</html>
